<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS元素显示模式</title>
    <style>
      /*块元素事例
      div {
        width: 500px;
        height: 100px;
        color: rgb(66, 172, 61);
      }*/
      /*行内块元素事例*/
      input {
        width: 250px;
        height: 50px;
      }
      /* 元素显示模式转换事例 */
      a {
        width: 150px;
        height: 50px;
        background-color: pink;
        /*把行内元素 a 转换为块级元素*/
        display: block;
      }
      div {
        width: 300px;
        height: 100px;
        background-color: red;
        /*把 div 块级元素转换为行内元素*/
        display: inline;
      }
      span {
        width: 300px;
        height: 30px;
        background-color: blue;
        /*把 span 行内元素转换为行内块元素*/
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <!--
    <div>自己占一行   一行可以放多个<span>
    HTML元素一般分为块元素和行内元素两种类型 
    常见的块元素:
    <h1> ~ <h6> , <p> , <div> , <ul> , <ol> , <il>等，其中<div>标签是最典型的块元素
    块元素的特点：
    1.比较霸道，自己独占一行
    2.高度、宽度、外边距以及内边距都可以控制
    3.宽度默认是容器（父级宽度）的 100%
    4.是一个容器及盒子，里面可以放行内或者块级元素
    注意：
    1.文字类的元素内不能使用块级元素
    2.<p> 标签主要用于存于文字，因此 <p>里面不能放块级元素，特别是不能放<div>
    3.同理，<h1> ~ <h6> 等都是文字类块级标签，里面也不能放其他块级元素
     -->
    <h4>块内元素</h4>
    <div>比较霸道，自己独占一行</div>
    瑟瑟发抖

    <!-- 
    常见的行内元素：
    <a> , <strong> , <b> , <em> , <i> , <del> , <s> , <u> , <span> 等
    其中 <span> 标签是典型的行内元素，有的地方也将行内元素称为内联元素
    特点：
    1.相邻行内元素在一行上，一行可以显示多个
    2.高、宽直接设置是无效的
    3.默认宽度就是它本身内容的宽度
    4.行内元素只能容纳文本或者其他行内元素
    注意：
    1.链接里面不能再放链接
    2.特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
     -->
    <br />
    <span>影</span> <span>胡桃</span> <span>甘雨</span> <span>心海</span>

    <!-- 
    行内块元素
    <img/> , <input/> , <td> ,它们同时具有块元素和行内元素的特点，称为行内块元素
    特点：
    1.和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）
    2.默认宽度就是它本身内容的宽度（行内元素特点）
    3.高度、行高、外边距以及内边距都可以控制（块级元素特点）
     -->
    <h4>行内块元素</h4>
    <!-- 设置宽和高 -->
    <input type="text" />

    <h4>元素显示模式转换</h4>
    <!-- 
    有时需要元素模式的转换，简单理解：一种模式的元素需要另外一种模式的特性 
    转换为块元素：display:block
    转换为行元素：display:inline
    -->
    <a href="#">我是行内元素</a>
    <a href="#">我是行内元素</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
  </body>
</html>
